<template>
  <div class="register-detail-container">
    <div class="page-header">
      <div class="header-back">
        <el-button type="primary" plain @click="goBack">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
        <h2>挂号详情</h2>
      </div>
    </div>
    
    <div v-loading="loading" class="detail-content">
      <!-- 患者信息 -->
      <div class="detail-card">
        <div class="card-header">
          <span class="card-title">患者信息</span>
        </div>
        <div class="card-content">
          <div class="info-row">
            <div class="info-item">
              <span class="label">患者姓名</span>
              <span class="value">{{ detailData.patientName }}</span>
            </div>
            <div class="info-item">
              <span class="label">就诊卡号</span>
              <span class="value">{{ detailData.slot_number }}</span>
            </div>
            <div class="info-item">
              <span class="label">患者头像</span>
              <span class="value">
                <el-avatar :size="50" :src="detailData.patientAvatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
              </span>
            </div>
          </div>
          
          <div class="info-row">
            <div class="info-item">
              <span class="label">证件类型</span>
              <span class="value">{{ detailData.idCardType }}</span>
            </div>
            <div class="info-item">
              <span class="label">证件号码</span>
              <span class="value">{{ detailData.idCardNumber }}</span>
            </div>
          </div>
          
          <div class="info-row">
            <div class="info-item">
              <span class="label">微信昵称</span>
              <span class="value">{{ detailData.wechatName }}</span>
            </div>
            <div class="info-item">
              <span class="label">手机号码</span>
              <span class="value">{{ detailData.phoneNumber }}</span>
            </div>
            <div class="info-item">
              <span class="label">关系</span>
              <span class="value">{{ detailData.relation }}</span>
            </div>
          </div>
          
          <div class="info-row">
            <div class="info-item full-width">
              <span class="label">就诊地址</span>
              <span class="value">{{ detailData.patientAddress }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 预约信息 -->
      <div class="detail-card">
        <div class="card-header">
          <span class="card-title">预约信息</span>
        </div>
        <div class="card-content">
          <div class="info-row">
            <div class="info-item">
              <span class="label">就诊医院</span>
              <span class="value">{{ detailData.hospitalName }}</span>
            </div>
            <div class="info-item">
              <span class="label">医院地址</span>
              <span class="value">{{ detailData.hospitalAddress }}</span>
            </div>
          </div>
          
          <div class="info-row">
            <div class="info-item">
              <span class="label">就诊科室</span>
              <span class="value">{{ detailData.departmentName }}</span>
            </div>
            <div class="info-item">
              <span class="label">就诊医生</span>
              <span class="value">{{ detailData.doctorName }}</span>
            </div>
            <div class="info-item">
              <span class="label">医生职称</span>
              <span class="value">{{ detailData.doctorTitle }}</span>
            </div>
          </div>
          
          <div class="info-row">
            <div class="info-item">
              <span class="label">挂号类型</span>
              <span class="value">{{ detailData.registerType }}</span>
            </div>
            <div class="info-item">
              <span class="label">挂号费用</span>
              <span class="value">¥{{ detailData.registerFee }}</span>
            </div>
            <div class="info-item">
              <span class="label">挂号状态</span>
              <span class="value">
                <el-tag :type="getStatusType(detailData.registerStatus)">
                  {{ detailData.registerStatus }}
                </el-tag>
              </span>
            </div>
          </div>
          
          <div class="info-row">

             <div class="info-item">
              <span class="label">预约日期</span>
              <span class="value">{{ formatDateTime(detailData.reserveTime) }}</span>
            </div>
               <div class="info-item">
              <span class="label">就诊日期</span>
              <span class="value">{{ formatDateTime(detailData.visitDate) }}</span>
            </div>
            <div class="info-item">
              <span class="label">门诊时间</span>
              <span class="value">{{ detailData.waitTime }}</span>
            </div>
        
        
          </div>
          
          <div class="info-row">
           
         
            <div class="info-item" v-if="detailData.cancelTime">
              <span class="label">取消时间</span>
              <span class="value">{{ formatDateTime(detailData.cancelTime) }}</span>
            </div>
            <div class="info-item">
              <span class="label">取消原因</span>
              <span class="value">{{ detailData.cancelReason || '无' }}</span>
            </div>


                 <div class="info-item">
              <span class="label">挂号备注</span>
              <div class="value-with-action">
                <span>{{ detailData.registerRemark || '无' }}</span>
                <el-button type="primary" size="small" @click="openEditRemarkDialog" plain circle>
                  <el-icon><Edit /></el-icon>
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div class="detail-actions">
        <el-button type="primary" @click="goBack">返回列表</el-button>
        <el-button type="danger" v-if="detailData.registerStatus === '待就诊'" @click="cancelRegistration">取消预约</el-button>
      </div>
    </div>
    
    <!-- 编辑备注对话框 -->
    <el-dialog
      v-model="remarkDialogVisible"
      title="修改挂号备注"
      width="500px"
    >
      <el-form :model="remarkForm">
        <el-form-item label="挂号备注">
          <el-input
            v-model="remarkForm.registerRemark"
            type="textarea"
            :rows="4"
            placeholder="请输入挂号备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="remarkDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveRemark" :loading="saveRemarkLoading">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowLeft, Edit } from '@element-plus/icons-vue'
import {axiosrmedical} from '@/http/axiosRead'
import {axioswmedical} from '@/http/axiosWrtie'
import moment from 'moment'
import { useRouter, useRoute } from 'vue-router'

// 路由初始化
const router = useRouter()
const route = useRoute()
const registerId = ref(route.params.id as string)
//对对对对
// 详情数据 d
const detailData = reactive({
  id: 0,
  patientId: 0,
  patientName: '',
  medicalCardNumber: '',
  idCardType: '',
  idCardNumber: '',
  wechatName: '',
  phoneNumber: '',
  relation: '',
  patientAvatar: '',
  patientAddress: '',
  hospitalName: '',
  hospitalAddress: '',
  departmentName: '',
  doctorName: '',
  doctorTitle: '',
  registerType: '',
  registerFee: 0,
  registerStatus: '',
  cancelReason: '',
  registerRemark: '',
  visitDate: '',
  waitTime: '',
  reserveTime: '',
  cancelTime: '',
  registrationId: 0,
  slot_number: 0
})

const loading = ref(false)

// 备注编辑相关
const remarkDialogVisible = ref(false)
const saveRemarkLoading = ref(false)
const remarkForm = reactive({
  registerRemark: ''
})

// 打开编辑备注对话框
const openEditRemarkDialog = () => {
  remarkForm.registerRemark = detailData.registerRemark || ''
  remarkDialogVisible.value = true
}

// 保存备注
const saveRemark = async () => {
  if (!remarkForm.registerRemark.trim()) {
    ElMessage.warning('请输入备注内容')
    return
  }
  
  saveRemarkLoading.value = true
  try {
    const response = await axioswmedical.put('/Register/UpdateCancelReason/UpdateCancelReason', {
      id: detailData.id,
      registerRemark: remarkForm.registerRemark.trim()
    })
    
    if (response.data && response.data.code === 200) {
      ElMessage.success('备注更新成功')
      detailData.registerRemark = remarkForm.registerRemark.trim()
      remarkDialogVisible.value = false
    } else {
      ElMessage.error(response.data.msg || '更新备注失败')
    }
  } catch (error) {
    console.error('更新备注出错:', error)
    ElMessage.error('更新备注出错')
  } finally {
    saveRemarkLoading.value = false
  }
}

// 获取挂号状态对应的标签类型
const getStatusType = (status: string) => {
  switch (status) {
    case '待就诊':
      return 'warning'
    case '已就诊':
      return 'success'
    case '已取消':
      return 'danger'
    default:
      return 'info'
  }
}

// 日期格式化方法
const formatDateTime = (dateStr: string) => {
  if (!dateStr) return ''
  return moment(dateStr).format('YYYY-MM-DD HH:mm:ss')
}

// 获取预约挂号详情
const fetchRegisterDetail = async () => {
  loading.value = true
  try {
    const url = `/Register/ShowRegisterDetail?id=${registerId.value}`
    const response = await axiosrmedical.get(url)
    
    if (response.data && response.data.code === 200) {
      // 将API返回的数据填充到详情对象中
      Object.assign(detailData, response.data.data)
    } else {
      ElMessage.error(response.data.msg || '获取预约挂号详情失败')
    }
  } catch (error) {
    console.error('获取预约挂号详情出错:', error)
    ElMessage.error('获取预约挂号详情出错')
  } finally {
    loading.value = false
  }
}

// 返回列表页
const goBack = () => {
  router.back()
}

// 取消预约
const cancelRegistration = () => {
  ElMessageBox.confirm('确定要取消此预约挂号吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      // 这里应该调用取消预约的API，当前只是模拟
      const url = `/Register/CancelRegister?id=${registerId.value}`
      const response = await axiosrmedical.post(url)
      
      if (response.data && response.data.code === 200) {
        ElMessage.success('预约已成功取消')
        // 重新获取详情数据
        fetchRegisterDetail()
      } else {
        ElMessage.error(response.data.msg || '取消预约失败')
      }
    } catch (error) {
      console.error('取消预约出错:', error)
      ElMessage.error('取消预约出错')
    }
  }).catch(() => {
    // 用户点击取消按钮
  })
}

// 组件挂载时获取数据
onMounted(() => {
  fetchRegisterDetail()
})
</script>

<style scoped>
.register-detail-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.header-back {
  display: flex;
  align-items: center;
  gap: 20px;
}

.detail-content {
  min-height: 400px;
}

.detail-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  overflow: hidden;
}

.card-header {
  background-color: #f8f9fa;
  padding: 15px 20px;
  border-bottom: 1px solid #e9ecef;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #495057;
}

.card-content {
  padding: 20px;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.info-item {
  flex: 1;
  min-width: 30%;
  margin-right: 15px;
  margin-bottom: 10px;
}

.full-width {
  flex: 0 0 100%;
}

.label {
  display: block;
  color: #6c757d;
  margin-bottom: 5px;
  font-size: 14px;
}

.value {
  font-size: 15px;
  color: #212529;
  word-break: break-all;
}

.detail-actions {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.value-with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.value-with-action span {
  flex: 1;
  margin-right: 10px;
}
</style> 